<template>
  <div class="order-container">
    <div class="header">
      <!-- 头部form -->
      <el-form ref="orderSearchForm" inline="true" label-width="86px" :model="OrderParams" :label-position="right">
        <el-form-item prop="id" label="订单编号：" class="item form-label">
          <el-input v-model="OrderParams.id" placeholder="请输入订单编号" class="inputWidth" />
        </el-form-item>
        <el-form-item prop="status" label="订单状态：" class="item form-label">
          <el-select v-model="OrderParams.status" placeholder="请选择">
            <el-option label="待取件" value="23000" />
            <el-option label="已取件" value="23001" />
            <el-option label="运输中" value="23005" />
            <el-option label="派送中" value="23008" />
            <el-option label="已签收" value="23009" />
            <el-option label="拒收" value="23010" />
            <el-option label="已取消" value="23011" />
          </el-select>
        </el-form-item>
        <el-form-item prop="paymentStatus" label="付费状态：" class="item form-label">
          <el-select v-model="OrderParams.paymentStatus" placeholder="请选择" style="width:220px">
            <el-option label="未付" value="1" />
            <el-option label="已付" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item prop="senderName" label="发件人姓名：" class="item form-label">
          <el-input v-model="OrderParams.senderName" placeholder="请输入发件人姓名" class="inputWidth" />
        </el-form-item>
        <el-form-item prop="senderPhone" label="发件人电话：" class="item form-label">
          <el-input v-model="OrderParams.senderPhone" placeholder="请输入发件人电话" class="inputWidth" />
        </el-form-item>
        <el-form-item label="发件人地址：" class="item form-label">
          <el-radio-group>
            <el-select v-model="OrderParams.senderProvinceId" prop="senderProvinceId" style="width:75px" placeholder="请选择" @change="getCity">
              <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-select v-model="OrderParams.senderCityId" prop="senderCityId" style="width:75px;margin:4px" placeholder="请选择" @change="getCounty">
              <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-select v-model="OrderParams.senderCountyId" prop="senderCountyId" style="width:75px;margin:4px" placeholder="请选择">
              <el-option v-for="item in countyList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="receiverName" label="收件人姓名：" class="item form-label">
          <el-input v-model="OrderParams.receiverName" placeholder="请输入收件人姓名" class="inputWidth" />
        </el-form-item>
        <el-form-item prop="receiverPhone" label="收件人电话：" class="item form-label">
          <el-input v-model="OrderParams.receiverPhone" placeholder="请输入收件人电话" class="inputWidth" />
        </el-form-item>
        <el-form-item label="收件人地址：" class="item form-label">
          <el-radio-group>
            <el-select v-model="OrderParams.receiverProvinceId" prop="receiverProvinceId" style="width:75px" placeholder="请选择" @change="getCity">
              <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-select v-model="OrderParams.receiverCityId" prop="receiverCityId" style="width:75px;margin:4px" placeholder="请选择" @change="getCounty">
              <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-select v-model="OrderParams.receiverCountyId" prop="receiverCountyId" style="width:75px;margin:4px" placeholder="请选择">
              <el-option v-for="item in countyList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="padding-left:30px">
          <el-button type="primary" @click="submitForm">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
    <!-- 头部form -->
    <!-- 底部table -->
    <div class="bottom">
      <el-table
        stripe
        :data="orderList"
        style="width: 100%"
        :header-cell-style="{background: '#f8faff'}"
      >
        <el-table-column
          fixed
          prop="order"
          type="index"
          label="序号"
          width="60px"
        />
        <el-table-column
          prop="id"
          label="订单编号"
          width="160px"
        />
        <el-table-column
          prop="transportOrder.id"
          label="运单编号"
          width="130px"
        />
        <el-table-column
          prop="createTime"
          label="下单时间"
          width="160px"
        />
        <el-table-column prop="status" label="订单状态" width="90px">
          <template v-slot="{ row }">
            <span v-if="row.status===23000">待取件</span>
            <span v-if="row.status===23001">已取件</span>
            <span v-if="row.status===23002">网点自寄</span>
            <span v-if="row.status===23003">网点入库</span>
            <span v-if="row.status===23004">待装车</span>
            <span v-if="row.status===23005">运输中</span>
            <span v-if="row.status===23006">网点出库</span>
            <span v-if="row.status===23007">待派送</span>
            <span v-if="row.status===23008">派送中</span>
            <span v-if="row.status===23009">已签收</span>
            <span v-if="row.status===23010">拒收</span>
            <span v-if="row.status===23011">已取消</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="senderName"
          label="发件人姓名"
          width="100px"
        />
        <el-table-column
          prop="senderPhone"
          label="发件人电话"
          width="120px"
        />
        <el-table-column
          prop="senderProvince.name,senderCity.name,senderCounty.name,senderAddress"
          label="发件人地址"
          width="150px"
        >
          <template v-slot="{row}">
            {{ row.senderProvince.name }}{{ row.senderCity.name }}{{ row.senderCounty.name }}{{ row.senderAddress }}
          </template>
        </el-table-column>
        <el-table-column
          prop="receiverName"
          label="收件人姓名"
          width="100px"
        />
        <el-table-column
          prop="receiverPhone"
          label="收件人电话"
          width="120px"
        />
        <el-table-column
          prop="receiverProvince.name,receiverCity.name,receiverCounty.name,receiverAddress"
          label="收件人地址"
          width="120px"
        >
          <template v-slot="{row}">
            {{ row.receiverProvince.name }}{{ row.receiverCity.name }}{{ row.receiverCounty.name }}{{ row.receiverAddress }}
          </template>
        </el-table-column>
        <el-table-column
          prop="pickupType"
          label="取件类型"
          width="100px"
        >
          <template v-slot="{row}">
            <span v-if="row.pickupType===0">上门取件</span>
            <span v-else>网点自寄</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="paymentMethod"
          label="付费类型"
          width="100px"
        >
          <template v-slot="{row}">
            <span v-if="row.paymentMethod===1">预结</span>
            <span v-else>到付</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="paymentStatus"
          label="付费状态"
          width="100px"
        >
          <template v-slot="{row}">
            <span v-if="row.paymentStatus===1">未付</span>
            <span v-else>已付</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="85px"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="$router.push(`/orderForm/detail/${row.id}`)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 size-change每页显示条数改变 current-change当前页变动 -->
      <div class="pagination-container">
        <el-pagination
          :current-page="OrderParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 底部table -->
  </div>
</template>

<script>
import { getArea, getOrderList } from '@/api/orderManagement'
export default {
  name: 'OrderForm',
  data() {
    return {
      // 订单列表请求参数
      OrderParams: {
        page: '1', // 页码
        pageSize: '10', // 页尺寸
        id: '', // 订单编号
        status: '', // 订单状态
        paymentStatus: '', // 付费状态
        senderName: '', // 发件人姓名
        senderPhone: '', // 发件人电话
        senderProvinceId: '', // 发件人省id
        senderCityId: '', // 发件人市id
        senderCountyId: '', // 发件人区id
        senderAddress: '', // 发件人详细地址
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        receiverProvinceId: '', // 收件人省id
        receiverCityId: '', // 收件人市id
        receiverCountyId: '', // 收件人区id
        receiverAddress: '' // 收件人详细地址
      },
      orderList: [], // 订单列表数据
      provinceList: [], // 省份列表
      cityList: [], // 城市列表
      countyList: [], // 区域列表
      counts: null // 总条目数
    }
  },
  created() {
    this.getOrderList()
    this.getProvince()
  },
  methods: {
    // 获取订单列表数据
    async getOrderList() {
      const result = await getOrderList(this.OrderParams)
      // console.log(result)
      this.orderList = result.data.data.items
      this.counts = result.data.data.counts
    },
    // 获取省份数据
    async getProvince() {
      const result = await getArea()
      this.provinceList = result.data.data
    },
    // 获取城市列表
    async getCity(id) {
      const result = await getArea({ parentId: id })
      this.cityList = result.data.data
    },
    // 获取区域列表
    async getCounty(id) {
      const result = await getArea({ parentId: id })
      this.countyList = result.data.data
    },
    // 点击搜索 根据form输入的信息搜索订单数据
    submitForm() {
      this.getOrderList(this.orderSearchForm)
    },
    // 重置搜索表单
    resetForm() {
      this.$refs.orderSearchForm.resetFields()
      this.OrderParams.senderProvinceId = ''
      this.OrderParams.senderCityId = ''
      this.OrderParams.senderCountyId = ''
      this.OrderParams.receiverProvinceId = ''
      this.OrderParams.receiverCityId = ''
      this.OrderParams.receiverCountyId = ''
    },
    // 当前页改变
    handleCurrentChange(page) {
      this.OrderParams.page = page
      this.getOrderList()
    },
    // 每页显示条数改变
    handleSizeChange(size) {
      this.OrderParams.pageSize = size
      this.getOrderList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .order-container {
    background: rgb(243, 245, 249);
  }
  .header {
    background: #fff;
    padding: 20px 20px 0 0;
    margin-bottom: 16px;

    .form-label ::v-deep .el-form-item__label {
      color: #20232a;
      text-align: right;
      white-space: nowrap;
      padding: 0 12px 0 0;
      vertical-align: middle;
    }

    .item {
      padding-left: 30px;
      padding-right: 30px;
      margin-bottom: 20px;
    }

    .inputWidth {
      width: 200px;
    }

    ::v-deep .el-input__inner {
      vertical-align: middle;
    }
  }

  .bottom {
    background: #fff;
    padding: 28px;

    .el-table {
      border: 1px solid #EBEEF5
    }

    .pagination-container {
      margin: 20px 0 0;
      padding: 0 0 20px;
      display: flex;
      justify-content: center;
    }
  }
</style>
